<template>
  <div class="container">
    <div class="first">
      <h2>
        {{ FirstData.title }}<span>-{{ FirstData.greenTitle }}</span>
      </h2>
      <p>
        {{ FirstData.content }}
      </p>
      <img
        src="../../assets/images/productSchemePlatform/Group109.png"
        alt="bgcImg"
      />
      <div
        v-for="item in FirstData.more"
        :key="item.className"
        :class="item.className"
      >
        <h4>{{ item.title }}</h4>
        <p>{{ item.content }}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "PlatformFirst",
  props: { FirstData: Object },
  data() {
    return {};
  },
};
</script>

<style lang="less" scoped>
.container {
  text-align: center;
  .first {
    margin: 0 auto;
    width: 1254px;
    position: relative;
    h2 {
      margin: 50px 0 20px;
      font-size: 36px;
      font-weight: 900;
      letter-spacing: 7.2px;
      span {
        color: #31c46c;
      }
    }
    p {
      color: #8c8c8cff;
      font-size: 16px;
      font-weight: 400;
      text-align: center;
      letter-spacing: 3.6px;
    }
    h4 {
      color: #31c46c;
      margin-bottom: 10px;
      font-size: 26px;
    }
    .left-top {
      position: absolute;
      margin-left: 68px;
      margin-top: -422px;
      width: 230px;
    }
    .left-bottom {
      position: absolute;
      margin-left: 68px;
      margin-top: -200px;
      width: 230px;
    }
    .right-top {
      position: absolute;
      margin-left: 984px;
      margin-top: -422px;
      width: 230px;
    }
    .right-bottom {
      position: absolute;
      margin-left: 984px;
      margin-top: -200px;
      width: 230px;
    }
  }
}
</style>
